<template>
    <div>
      <h1>歌单介绍</h1>
      <div>
        <el-tabs @tab-click="handClick">
          <el-tab-pane label="全部" name="1">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="欧美" name="2">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="华语" name="3">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="流行" name="4">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="说唱" name="5">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="摇滚" name="6">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="民谣" name="7">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="电子" name="8">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="旅行" name="9">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="治愈" name="10">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="怀旧" name="11">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="轻音乐" name="12">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="影视原声" name="13">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="ACG" name="14">
            <div class="top" v-for="(item,index) in musicList" :key="index">
              <div class="fm">
                <img :src="item.coverImgUrl" width="200" height="200">
              </div>
              <div class="title">
                <p>{{item.name}}</p>
              </div>
              <div class="info">
                <span class="checkspan">{{item.description}}</span>
              </div>
              <div class="bg">
                <img :src="item.creator.backgroundUrl">
              </div>
              <el-button type="primary" class="playButton" @click="toPalyList(item.id)">进入</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
</template>

<script>
export default {
  name: 'OrderMusic',
  data () {
    return {
      musicList: [],
      tag: '全部',
      pagesize: 10,
      pagenum: 1,
      total: 0,
      updatetime: 0
    }
  },
  watch: {
    tag () {
      console.log(this.tag)
      this.getNewList()
    }
  },
  created () {
    this.getNewList()
  },
  methods: {
    async getNewList () {
      const { data: res } = await this.$http.get(`/top/playlist/highquality?limit=${this.pagesize}&cat=${this.tag}&before=${this.updatetime}`)
      console.log(res)
      this.musicList = res.playlists
      this.total = res.total
      this.updatetime = res.playlists[0].updateTime
    },
    handleSizeChange (newSize) {
      this.pagesize = newSize
      this.getNewList()
    },
    handleCurrentChange (newPage) {
      console.log(`${newPage}`)
      this.pagenum = newPage
      this.getNewList()
    },
    toPalyList (id) {
      this.$router.push(`/playlist?q=${id}`)
    },
    handClick (tab, event) {
      if (tab.name === '1') {
        this.tag = '全部'
      } else if (tab.name === '2') {
        this.tag = '欧美'
      } else if (tab.name === '3') {
        this.tag = '华语'
      } else if (tab.name === '4') {
        this.tag = '流行'
      } else if (tab.name === '5') {
        this.tag = '说唱'
      } else if (tab.name === '6') {
        this.tag = '摇滚'
      } else if (tab.name === '7') {
        this.tag = '民谣'
      } else if (tab.name === '8') {
        this.tag = '电子'
      } else if (tab.name === '9') {
        this.tag = '旅行'
      } else if (tab.name === '10') {
        this.tag = '治愈'
      } else if (tab.name === '11') {
        this.tag = '怀旧'
      } else if (tab.name === '12') {
        this.tag = '轻音乐'
      } else if (tab.name === '13') {
        this.tag = '影视原音'
      } else if (tab.name === '14') {
        this.tag = 'ACG'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .top{
    width: 100%;
    height: 300px;
    position: relative;
    padding: 20px;
  }
  .fm{
    position: absolute;
    z-index: 2;
    top: 50px;
  }
  .bg{
    position: absolute;
    top: 0;
  }
  .bg img{
    width: 1250px;
    height: 300px;
  }
  p{
    position: absolute;
    z-index: 5;
    top: 10px;
    color: #ffffff;
  }
  span{
    width: 800px;
    position: absolute;
    top: 50px;
    left: 250px;
    z-index: 5;
    color: #ffffff;
  }
  .playButton{
    position: absolute;
    right: 80px;
    bottom: 50px;
    z-index: 10;
  }
  .checkspan{
    width: 800px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp: 10;
    font-size: 14px;
  }
</style>
